<div id="page-preloader">
    <div class="preload-tetrominos">
        <div class="preload-tetromino preload-box1"></div>
        <div class="preload-tetromino preload-box2"></div>
        <div class="preload-tetromino preload-box3"></div>
        <div class="preload-tetromino preload-box4"></div>
    </div>
</div>

<style>

#page-preloader{background:#ffffff;position:fixed;left:0;top:0;right:0;bottom:0;z-index:999999;}
.preload-tetrominos{position:absolute;left:50%;top:50%;transform:translate(-109px, -94px);-o-transform:translate(-109px, -94px);-ms-transform:translate(-109px, -94px);-webkit-transform:translate(-109px, -94px);-moz-transform:translate(-109px, -94px);}
.preload-tetromino{width:45px;height:55px;position:absolute;transition:all ease 0.35s;-o-transition:all ease 0.35s;-ms-transition:all ease 0.35s;-webkit-transition:all ease 0.35s;-moz-transition:all ease 0.35s;background:url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 684"%3E%3Cpath fill="%23010101" d="M305.7 0L0 170.9v342.3L305.7 684 612 513.2V170.9L305.7 0z"/%3E%3Cpath fill="%23fff" d="M305.7 80.1l-233.6 131 233.6 131 234.2-131-234.2-131"/%3E%3C/svg%3E') no-repeat top center;}
.preload-box1{animation:preload-tetromino1 1.73s ease-out infinite;-o-animation:preload-tetromino1 1.73s ease-out infinite;-ms-animation:preload-tetromino1 1.73s ease-out infinite;-webkit-animation:preload-tetromino1 1.73s ease-out infinite;-moz-animation:preload-tetromino1 1.73s ease-out infinite;}
.preload-box2{animation:preload-tetromino2 1.73s ease-out infinite;-o-animation:preload-tetromino2 1.73s ease-out infinite;-ms-animation:preload-tetromino2 1.73s ease-out infinite;-webkit-animation:preload-tetromino2 1.73s ease-out infinite;-moz-animation:preload-tetromino2 1.73s ease-out infinite;}
.preload-box3{animation:preload-tetromino3 1.73s ease-out infinite;-o-animation:preload-tetromino3 1.73s ease-out infinite;-ms-animation:preload-tetromino3 1.73s ease-out infinite;-webkit-animation:preload-tetromino3 1.73s ease-out infinite;-moz-animation:preload-tetromino3 1.73s ease-out infinite;z-index:2;}
.preload-box4{animation:preload-tetromino4 1.73s ease-out infinite;-o-animation:preload-tetromino4 1.73s ease-out infinite;-ms-animation:preload-tetromino4 1.73s ease-out infinite;-webkit-animation:preload-tetromino4 1.73s ease-out infinite;-moz-animation:preload-tetromino4 1.73s ease-out infinite;}
/*! CSS Used keyframes */
@keyframes preload-tetromino1{0%, 40%{transform:translate(0, 0);}50%{transform:translate(47px, -26px);}60%,     100%{transform:translate(94px, 0);}}
@-o-keyframes preload-tetromino1{0%, 40%{-o-transform:translate(0, 0);}50%{-o-transform:translate(47px, -26px);}60%,     100%{-o-transform:translate(94px, 0);}}
@-ms-keyframes preload-tetromino1{0%, 40%{-ms-transform:translate(0, 0);}50%{-ms-transform:translate(47px, -26px);}60%,     100%{-ms-transform:translate(94px, 0);}}
@-webkit-keyframes preload-tetromino1{0%, 40%{-webkit-transform:translate(0, 0);}50%{-webkit-transform:translate(47px, -26px);}60%,     100%{-webkit-transform:translate(94px, 0);}}
@-moz-keyframes preload-tetromino1{0%, 40%{-moz-transform:translate(0, 0);}50%{-moz-transform:translate(47px, -26px);}60%,     100%{-moz-transform:translate(94px, 0);}}
@keyframes preload-tetromino2{0%, 20%{transform:translate(94px, 0px);}40%,     100%{transform:translate(140px, 26px);}}
@-o-keyframes preload-tetromino2{0%, 20%{-o-transform:translate(94px, 0px);}40%,     100%{-o-transform:translate(140px, 26px);}}
@-ms-keyframes preload-tetromino2{0%, 20%{-ms-transform:translate(94px, 0px);}40%,     100%{-ms-transform:translate(140px, 26px);}}
@-webkit-keyframes preload-tetromino2{0%, 20%{-webkit-transform:translate(94px, 0px);}40%,     100%{-webkit-transform:translate(140px, 26px);}}
@-moz-keyframes preload-tetromino2{0%, 20%{-moz-transform:translate(94px, 0px);}40%,     100%{-moz-transform:translate(140px, 26px);}}
@keyframes preload-tetromino3{0%{transform:translate(140px, 26px);}20%,     60%{transform:translate(94px, 53px);}90%,     100%{transform:translate(47px, 26px);}}
@-o-keyframes preload-tetromino3{0%{-o-transform:translate(140px, 26px);}20%,     60%{-o-transform:translate(94px, 53px);}90%,     100%{-o-transform:translate(47px, 26px);}}
@-ms-keyframes preload-tetromino3{0%{-ms-transform:translate(140px, 26px);}20%,     60%{-ms-transform:translate(94px, 53px);}90%,     100%{-ms-transform:translate(47px, 26px);}}
@-webkit-keyframes preload-tetromino3{0%{-webkit-transform:translate(140px, 26px);}20%,     60%{-webkit-transform:translate(94px, 53px);}90%,     100%{-webkit-transform:translate(47px, 26px);}}
@-moz-keyframes preload-tetromino3{0%{-moz-transform:translate(140px, 26px);}20%,     60%{-moz-transform:translate(94px, 53px);}90%,     100%{-moz-transform:translate(47px, 26px);}}
@keyframes preload-tetromino4{0%, 60%{transform:translate(47px, 26px);}90%,     100%{transform:translate(0, 0);}}
@-o-keyframes preload-tetromino4{0%, 60%{-o-transform:translate(47px, 26px);}90%,     100%{-o-transform:translate(0, 0);}}
@-ms-keyframes preload-tetromino4{0%, 60%{-ms-transform:translate(47px, 26px);}90%,     100%{-ms-transform:translate(0, 0);}}
@-webkit-keyframes preload-tetromino4{0%, 60%{-webkit-transform:translate(47px, 26px);}90%,     100%{-webkit-transform:translate(0, 0);}}
@-moz-keyframes preload-tetromino4{0%, 60%{-moz-transform:translate(47px, 26px);}90%,     100%{-moz-transform:translate(0, 0);}}
</style>